<route lang="yaml">
meta:
  layout: home
  title: 我的收藏
  savedPosition: true
</route>
<template>
  <div class=" bg-white" v-loading="loading">
    <div class="text-2xl flex justify-start px-8  leading-16! divide_b">
      收藏
    </div>

    <!-- 内容版块 -->
    <div v-if="bookList.length !== 0">
      <ul>
        <li :key="item?._id" v-for="item in bookList" class="px-8 py-6 divide_b mb-list-font">
          <!-- 头部 -->
          <div class="flex justify-start items-center relative">       
            <RouterLink :to="`/accountCenter/postList/${item?.user?._id}`">
              <div class="mr-2">
                <img :src="IMG_URL_SERVER+item?.user?.avatar?.url" :alt="item?.user?.avatar?.name" class="avatar wh-6"/>
              </div>
            </RouterLink>
            <RouterLink :to="`/accountCenter/postList/${item?.user?._id}`">
                <div><span class="hover:text-blue-500">{{item?.user?.nickname}}</span></div>
            </RouterLink>
            <div class="ml-2">
              <img class="h-4" :src="IMG_URL_SERVER+item?.user?.level?.url" alt="">
            </div>
            <div class="ml-4 h3 text-sm">{{dateFormat(item?.createdAt)}}</div>
          </div>
            
          <RouterLink :to="`/article/${item?._id}`" @mouseenter="titleHover($event)" @mouseleave="titleHover($event)">
            <div class="title truncate text-md sm:text-base md:text-lg lg:text-xl font-bold">{{item?.title}}</div>
            <div class="truncate text-sm  md:text-base texts" >{{item?.text}}</div>
          </RouterLink>
          <!-- 文章图片 -->
          <div class="flex justify-start">
            <template v-for="img,index in item?.images?.slice(0,3)" :key="img?._id">          
              <el-image    
                class="px-1 wh-24"
                :src="IMG_URL_SERVER +img?.url"
                :preview-src-list="item?.images?.slice(0,3)?.map((val:any)=>IMG_URL_SERVER+val.url)"
                :initial-index="index"
                :alt="img?.name"
                fit="cover"
              />  
            </template>
          </div>
   
          <div class="flex justify-end opacity-70">
            <div class="flex items-center">
              <div class="wh-5 mx-2 i-carbon-view"></div>
              <span>{{item?.read}}</span>
            </div>
            <RouterLink :to="`/article/${item?._id}#reply`">
              <div class="flex items-center">
                <div class="wh-5 mx-2 i-carbon-chat"></div>
                <span>{{item?.comments}}</span>
              </div>
            </RouterLink>
            <div class="flex items-center">
              <div class="wh-5 mx-2 i-carbon-thumbs-up"></div>
              <span>{{item?.praise}}</span>
            </div>
          </div>
        </li>
      </ul>
      <div class="text-center">没有更多的数据了</div>
    </div>
    <div v-else-if="bookList.length === 0">
      <el-empty description="暂时没有数据哟" :image-size="200" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { fetchUserCollectingTopicList } from "@/server";
import { IMG_URL_SERVER } from "@/config"
import { dateFormat } from "@/utils"
//route
const route = useRoute()
//用户收藏列表
const bookList:any = ref([])
//等待加载
const loading = ref(true)

//标题样式
const titleHover = (e:any)=>{
  if(e.type==="mouseenter"){
    e.target.querySelector('.title').classList.add("text-blue-400")
  }else{
    e.target.querySelector('.title').classList.remove("text-blue-400")
  } 
}

//更新时发送fetch
watchEffect(()=>{
  if(route.params.id){
    //获取收藏列表
    fetchUserCollectingTopicList(route.params.id as string,()=>true).then((data)=>{ 
      bookList.value = data

      setTimeout(() => {
        loading.value = false
      }, 300)
    })
  }
},{flush:'post'})
</script>

<style scoped lang="scss">
// .mb-list-font{
//   @media screen and (min-width:768px) and (max-width:1024px){
//     font-size: 0.95em;
//     .title{
//       font-size: 1.34rem;
//       line-height: 1.58rem;
//     }
//     .texts{
//       font-size: 1.18rem;
//       line-height: 1.42rem;
//     }
//   }
//   @media screen and (min-width:640px) and (max-width:768px){
//     font-size: 0.95em;
//     .title{
//       font-size: 1.22rem;
//       line-height: 1.54rem;
//     }
//     .texts{
//       font-size: 1.1rem;
//       line-height: 1.35rem;
//     }
//   }
//   @media screen and (max-width:640px){
//     font-size: 0.95em;
//     .title{
//       font-size: 1.15rem;
//       line-height: 1.4rem;
//     }
//     .texts{
//       font-size: 0.94rem;
//       line-height: 1.3rem;
//     }
//   }
// }
</style>
